<template>
	<view class="wrap">
		<u-loading-page :loading="loading"></u-loading-page>
		<view v-if="!loading">
			<view class="header">
				<image v-if="!idFlag && !driverFlag" src="@/static/bg_success.png" mode=""></image>
				<image v-else src="@/static/bg_warning.png" mode=""></image>
				<view class="flex">
					<text class="plate">{{driverInfo.driverName}}</text>
					<text class="tag" v-if="date.driverStatus == 1">黑名单</text>
				</view>
				<view class="type">
					<text>{{driverInfo.mobile}}</text>
					<text class="ring" @click="makePhoneCall(driverInfo.mobile)">联系司机</text>
				</view>
			</view>
			<view class="body">
				<view class="content">
					<view class="title between">
						<view>所属项目</view>
						<view class="set" @click="goRelation()">
							<text style="margin-right: 6rpx;" v-text="!user_project.length ? '添加' : '管理'"></text>
							<u-icon name="arrow-right" size="14"></u-icon>
						</view>
					</view>
					<view class="info">
						<view class="name" v-for="(item, index) in user_project" :key="index"
							v-show="isShowMore(index)">
							{{item.project_name}}
						</view>
						<view class="empty" v-if="!user_project.length">暂无项目</view>
					</view>
					<view class="fold" @click="triggerShowDriver" v-if="user_project.length > 3">
						<view v-if="!showDriver">
							<text style="margin-right: 12rpx;">展开全部</text>
							<u-icon name="arrow-down-fill" color="#9E9E9E" size="10"></u-icon>
						</view>
						<view v-else>
							<text style="margin-right: 12rpx;">收起全部</text>
							<u-icon name="arrow-up-fill" color="#9E9E9E" size="10"></u-icon>
						</view>
					</view>
				</view>
				<view class="content">
					<view class="title">
						<view>身份证信息</view>
						<view class="overdue" v-if="idFlag">证件过期</view>
					</view>
					<view class="info">
						<view class="item">
							<view class="gray">姓名：</view>
							<view class="black">{{driverInfo.driverName}}</view>
						</view>
						<view class="item">
							<view class="gray">手机号：</view>
							<view class="black">{{driverInfo.mobile}}</view>
						</view>
						<view class="item">
							<view class="gray">身份证号码：</view>
							<view class="black">{{driverInfo.idcard}}</view>
						</view>
						<view class="item">
							<view class="gray">身份证有效期：</view>
							<view class="black">
								{{formatTime(driverInfo.idcardStartDate)}}~{{formatTime(driverInfo.idcardEndDate)}}
							</view>
						</view>
						<view class="item">
							<view class="gray">身份证照片：</view>
							<view class="black" @click="photoInfo(0)" v-if="hasIdcard">
								<view>已上传</view>
								<view class="check">点击查看</view>
							</view>
							<view class="black" v-else>
								<view>未上传</view>
							</view>
						</view>
					</view>
				</view>
				<view class="content">
					<view class="title">
						<view>驾驶证信息</view>
						<view class="overdue" v-if="driverFlag">证件过期</view>
					</view>
					<view class="info">
						<view class="item">
							<view class="gray">准驾车型：</view>
							<view class="black">{{driverInfo.driverModel}}</view>
						</view>
						<view class="item">
							<view class="gray">发证机关：</view>
							<view class="black">{{driverInfo.issuingOrganizations}}</view>
						</view>
						<view class="item">
							<view class="gray">驾驶证有效期：</view>
							<view class="black">
								{{formatTime(driverInfo.driverStartDate)}}~{{formatTime(driverInfo.driverEndDate)}}
							</view>
						</view>
						<view class="item">
							<view class="gray">驾驶证照片：</view>
							<view class="black" @click="photoInfo(1)" v-if="hasDriving">
								<view>已上传</view>
								<view class="check">点击查看</view>
							</view>
							<view class="black" v-else>
								<view>未上传</view>
							</view>
						</view>
					</view>
				</view>
				<view class="content">
					<view class="title">从业资格证信息</view>
					<view class="info">
						<view class="item">
							<view class="gray">从业资格证照片：</view>
							<view class="black" @click="photoInfo(2)" v-if="hasTqc">
								<view>已上传</view>
								<view class="check">点击查看</view>
							</view>
							<view class="black" v-else>
								<view>未上传</view>
							</view>
						</view>
					</view>
				</view>
				<view class="content">
					<view class="title">操作时间</view>
					<view class="info">
						<view class="item">
							<view class="gray">申请时间：</view>
							<view class="black">{{date.crtDate || driverInfo.crtTime}}</view>
						</view>
						<view class="item">
							<view class="gray">审核通过时间：</view>
							<view class="black">{{date.auditTime}}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="footer" v-if="idFlag || driverFlag">
				<view class="submit" @click="goRegister">重新提交</view>
			</view>
			<view class="footer">
				<view v-if="date.driverStatus == 0" class="submit" @click="showAdd">设为黑名单</view>
				<view v-else class="submit" @click="showDelete">取消黑名单</view>
			</view>
			<u-modal :show="show" :content='content' showCancelButton closeOnClickOverlay @confirm="postBlacklist" @cancel="show=false" @close="show=false"></u-modal>
		</view>
	</view>
</template>

<script>
	import {
		driverDetail,
		blacklistAdd,
		blacklistDelete
	} from '@/config/api/app.js'
	import {
		formatDate
	} from '@/utils/tools'
	export default {
		data() {
			return {
				loading: true,
				showDriver: false,
				driver_id: '',
				driverInfo: null,
				user_project: null,
				date: null,
				show: false,
				content: '',
				type: 0,

				idFlag: false,
				driverFlag: false,
				hasIdcard: false,
				hasDriving: false,
				hasTqc: false,
			}
		},
		async onLoad(options) {
			let info = JSON.parse(options.info)
			this.driver_id = info.driver_id
			await this.getDetail()
		},
		onShow() {
			this.getDetail()
		},
		methods: {
			showAdd() {
				this.show = true
				this.content = '是否将该司机加入黑名单'
				this.type = 0
			},
			showDelete() {
				this.show = true
				this.content = '是否将该司机移除黑名单'
				this.type = 1
			},
			postBlacklist(type) {
				this.show = false
				this.type === 0 ? this.postBlacklistAdd() : this.postBlacklistDelete()
			},
			postBlacklistAdd() {
				let obj = {
					driverVehicleId: this.driver_id,   //司机id或车辆id
					typeId: '1',  //id类型：1司机2车辆
				}
				blacklistAdd(obj, {
					custom: {
						title: '提交中……'
					}
				}).then(res => {
					console.log(res)
					if (res.code == 0) {
						uni.$u.toast("添加成功");
						this.getDetail()
					} else {
						uni.$u.toast(res.msg);
					}
				}).catch(err => {
					console.log(err)
				})
			},
			postBlacklistDelete() {
				let obj = {
					driverVehicleId: this.driver_id,   //司机id或车辆id
					typeId: '1',  //id类型：1司机2车辆
				}
				blacklistDelete(obj, {
					custom: {
						title: '提交中……'
					}
				}).then(res => {
					console.log(res)
					if (res.code == 0) {
						uni.$u.toast("移除成功");
						this.getDetail()
					} else {
						uni.$u.toast(res.msg);
					}
				}).catch(err => {
					console.log(err)
				})
			},
			getDetail() {
				driverDetail({
					params: {
						driver_id: this.driver_id
					}
				}).then((res) => {
					if (res.code == 0) {
						this.driverInfo = res.data.driver
						this.user_project = res.data.user_project
						this.date = res.data.date
						this.loading = false
						this.idFlag = this.computeDate(this.driverInfo.idcardEndDate)
						this.driverFlag = this.computeDate(this.driverInfo.driverEndDate)
						this.hasIdcard = this.hasPhoto(this.driverInfo.idcard1, this.driverInfo.idcard2)
						this.hasDriving = this.hasPhoto(this.driverInfo.driverLicense, this.driverInfo
							.drivingLicenseDeputy)
						this.hasTqc = this.hasPhoto(this.driverInfo.tqc, this.driverInfo.tqcDeputy)
					} else {
						uni.$u.toast(res.msg);
					}
				}).catch(err => {
					console.log(err)
				})
			},
			triggerShowDriver() {
				this.showDriver = !this.showDriver
			},
			photoInfo(num) {
				// 0是身份证， 1是驾驶证， 2是从业资格证
				const {
					idcard1,
					idcard2,
					driverLicense,
					drivingLicenseDeputy,
					tqc,
					tqcDeputy
				} = this.driverInfo
				let urls = []
				if (num === 0) {
					if (idcard1) urls.push(idcard1)
					if (idcard2) urls.push(idcard2)
				}
				if (num === 1) {
					if (driverLicense) urls.push(driverLicense)
					if (drivingLicenseDeputy) urls.push(drivingLicenseDeputy)
				}
				if (num === 2) {
					if (tqc) urls.push(tqc)
					if (tqcDeputy) urls.push(tqcDeputy)
				}
				uni.previewImage({
					indicator: "number",
					loop: true,
					urls: urls,
					success: () => {
						console.log('图片展示成功')
					}
				})
			},
			goRegister() {
				uni.navigateTo({
					url: `/pages/driver/register?id=${this.driver_id}`
				})
			},
			goRelation() {
				if (!this.user_project.length) {
					uni.navigateTo({
						url: `./add?driver_id=${this.driver_id}&&type=1`
					})
				} else {
					let options = {
						list: this.user_project,
						driver_id: this.driver_id
					}
					let json = JSON.stringify(options)
					console.log(json)
					uni.setStorageSync('relation', json); //存
					// return false
					uni.navigateTo({
						// url: `./relation?data=${json}`
						url: './relation?data='+ json
					})
				}
			},
			makePhoneCall(phone) {
				uni.makePhoneCall({
					phoneNumber: phone.toString(),
					success: function(e) {
						console.log(e);
					},
					fail: function(e) {
						console.log(e);
					}
				})
			},
			//	时间是否过期
			computeDate(date) {
				let endDate = new Date(date)
				let currentDate = new Date()
				if (endDate > currentDate) {
					return false
				} else {
					return true
				}
			},
			//	是否有展示更多
			isShowMore(index) {
				if (this.showDriver) {
					return true
				} else {
					if (index > 2) {
						return false
					} else {
						return true
					}
				}
			},
			//	身份证，驾驶证，从业资质图片是否有上传
			hasPhoto(front, reverse) {
				if (!front && !reverse) {
					return false
				} else {
					return true
				}
			},
			formatTime(str) {
				return formatDate(str)
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #FBFBFB;
	}

	.body {
		padding: 0 32rpx;

		.content {
			padding: 0 32rpx;
			background: #fff;
			margin: 32rpx 0;
			border-radius: 10rpx;

			.info {
				padding: 12rpx 0;

				.name {
					font-size: 30rpx;
					font-weight: 500;
					color: #333333;
					line-height: 66rpx;
				}

				.empty {
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 28rpx;
					color: #9E9E9E;
					line-height: 66rpx;
				}
			}

			.title {
				padding: 16rpx 0 16rpx 24rpx;
				font-size: 34rpx;
				font-weight: 500;
				color: #333;
				border-bottom: 1rpx solid #F5F7FB;
				position: relative;
				display: flex;
				align-items: center;

				.overdue {
					font-size: 22rpx;
					font-weight: 500;
					color: #FFFFFF;
					background: #8D090C;
					border-radius: 4rpx;
					padding: 6rpx 12rpx;
					margin-left: 12rpx;
				}

				&:before {
					content: '';
					position: absolute;
					left: 0;
					top: 24rpx;
					width: 8rpx;
					height: 32rpx;
					background: #003E81;
				}
			}

			.between {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.set {
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 28rpx;
					font-weight: 500;
					color: #9E9E9E;
					padding-left: 24rpx;
				}
			}

			.item {
				display: flex;
				align-items: baseline;
				justify-content: space-between;
				padding: 16rpx 0;
				font-size: 30rpx;

				.gray {
					font-weight: 400;
					color: #9E9E9E;
					width: 39%;
				}

				.black {
					width: 60%;
					font-weight: 500;
					color: #333333;
					display: flex;
					align-items: center;
					justify-content: flex-end;

					.check {
						font-size: 22rpx;
						font-weight: 500;
						color: #003E81;
						padding: 5rpx 10rpx;
						background: #F0F7FF;
						margin-left: 12rpx;
					}
				}
			}

			.fold>view {
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 30rpx;
				font-weight: 400;
				color: #9E9E9E;
				padding: 20rpx 0;
				border-top: 1rpx solid #F5F7FB;
			}
		}
	}

	.header {
		position: relative;
		padding: 24rpx 60rpx;
		box-sizing: border-box;
		background: #fff;

		image {
			position: absolute;
			right: 0;
			bottom: 0;
			width: 386rpx;
			height: 226rpx;
			zoom: .8;
		}

		.flex {
			display: flex;
			align-items: center;
			justify-content: flex-start;
		}
		
		.tag{
			color: #fff;
			padding: 6rpx 20rpx;
			border-radius: 4rpx;
			background: #aaa;
			font-size: 24rpx;
			margin-left: 24rpx;
		}

		.tips {
			font-size: 26rpx;
			font-weight: 500;
			color: #E46F39;
			margin-right: 12rpx;
			padding: 6rpx 10rpx;
			background: #FFEBE1;
		}

		.plate {
			font-size: 48rpx;
			font-weight: bold;
			color: #333333;
		}

		.type {
			font-size: 30rpx;
			font-weight: 500;
			color: #333333;
			line-height: 44rpx;
			margin-top: 20rpx;

			.ring {
				font-size: 22rpx;
				font-weight: 500;
				color: #003E81;
				background: #F0F7FF;
				border-radius: 4rpx;
				margin-left: 12rpx;
				padding: 3rpx 12rpx;
			}
		}
	}

	.footer {
		padding: 24rpx 50rpx;
		background: #fff;

		.submit {
			width: 100%;
			font-size: 30rpx;
			font-weight: 500;
			color: #FFFFFF;
			line-height: 80rpx;
			border-radius: 12rpx;
			text-align: center;
			background: linear-gradient(to right, #4d83b9, #003E81);
		}
	}
</style>
